<template>
  <div class="com-container" @dblclick="returnChina">
      <div class="com-chart" ref="map_ref" ></div>
  </div>
</template>

<script>
import axios from 'axios'
import {getProvinceMapInfo} from '@/utils/map_utils.js'
export default {
    data(){
        return{
            chartInstance:null,
            allData:null,
            mapData:{}
        }
    },
    mounted(){
        this.initChart();
        this.getData();
        this.screenAdapter();
        window.addEventListener('resize',this.screenAdapter);
    },
    destroyed(){
        window.removeEventListener('resize',this.screenAdapter);
    },
    methods:{
        async initChart(){
            
            this.chartInstance = window.echarts.init(this.$refs.map_ref,'chalk');
            this.chartInstance.on('click',async (arg)=>{
                // console.log(arg);
               const mapInfo= getProvinceMapInfo(arg.name);
               console.log(mapInfo);
               if(!this.mapData[mapInfo.key]){
                   const provinceData = await axios.get('http://localhost:8081'+mapInfo.path);
                    this.mapData[mapInfo.key] =provinceData.data
                    window.echarts.registerMap(mapInfo.key,provinceData.data);
               }
               
               const changeOption={
                   geo:{
                       map:mapInfo.key
                   }
               }
               this.chartInstance.setOption(changeOption);

            })
            const ret =await axios.get('http://localhost:8081/static/map/china.json');
            window.echarts.registerMap('china',ret.data);
            const initOption ={
                title: {
                        text: '▎商家分布',
                        left: 20,
                        top: 20
                    },
                    geo: {
                        type: 'map',
                        map: 'china',
                        top: '5%',
                        bottom: '5%',
                        itemStyle: {
                            areaColor: '#2E72BF',
                            borderColor: '#333'
                        },
                        type:'map',
                        map:'china'
                    },
                    legend: {
                        left: '5%',
                        bottom: '5%',
                        orient: 'vertical'
                    },
            };
            this.chartInstance.setOption(initOption);
        },
        async getData(){
            //得到数据
            this.allData = await axios.get('http://127.0.0.1:8888/map');
            // console.log(res);
            this.updateChart();
        },
        updateChart(){
            const seriesArr =this.allData.data.map(item=>{
                return {
                    type:'effectScatter',
                    name:item.name,
                    data:item.children,
                    coordinateSystem:'geo',
                    rippleEffect:{
                        scale:5,
                        brushType:'stroke'
                    }

                }
            });
            const legendArr =this.allData.data.map(item=>{
                return item.name;
            })
            const dataOption ={
                series:seriesArr,
                legend:{
                    data:legendArr
                }
            };
            this.chartInstance.setOption(dataOption);

        },
        screenAdapter(){
            const titleFontSize =this.$refs.map_ref.offsetWidth/100*3.6

            const adapterOption ={
                title:{
                    textStyle:{
                        fontSize:titleFontSize
                    }
                },
                legend:{
                    itemWidth:titleFontSize/3,
                    itemHeight:titleFontSize/3,
                    itemGap:titleFontSize/3,
                    textStyle:{
                        fontSize:titleFontSize/3
                    }
                }
            };
            this.chartInstance.setOption(adapterOption);
            this.chartInstance.resize();
        },
        returnChina(){
            const returnOption={
                geo:{
                    map:'china'
                },
               
            }
            this.chartInstance.setOption(returnOption)
        }

    }

}
</script>

<style>

</style>